<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0" />
    <title>sass颜色函数</title>
    <meta
      name="keywords"
      content="demo,js,css,sass,animate,技术方案" />
    <style id="sass_style"></style>
  </head>

  <body>
    <div class="outbox">
      <div
        class="btn"
        type="primary">
        按钮
      </div>
      <div
        class="btn"
        type="success">
        按钮
      </div>
      <div
        class="btn"
        type="warning">
        按钮
      </div>
      <div
        class="btn"
        type="danger">
        按钮
      </div>
      <div
        class="btn"
        type="info">
        按钮
      </div>
    </div>
    <div class="outbox">
      <div
        class="btn"
        disabled
        type="primary">
        按钮
      </div>
      <div
        class="btn"
        disabled
        type="success">
        按钮
      </div>
      <div
        class="btn"
        disabled
        type="warning">
        按钮
      </div>
      <div
        class="btn"
        disabled
        type="danger">
        按钮
      </div>
      <div
        class="btn"
        disabled
        type="info">
        按钮
      </div>
    </div>

    <script type="module">
      const sass = await import('https://jspm.dev/sass')
      let sassStyleSData = sass.compileString(`

body {
  background: #000;
  margin:0;
  padding:8px
}
.outbox {
  width:100%;
  max-width:90vw;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  margin-bottom:1rem;
}
.btn {
  width:4rem;
  padding:0.5rem;
  border-radius:0.2rem;
  text-align:center;
  cursor:pointer;
}
$btnType:primary,success,warning,danger,info;
$btnColor:#409EFF,#67C23A,#E6A23C,#F56C6C,#909399;
@for $i from 1 through length($btnType) {
  .btn[type="#{nth($btnType,$i)}"] {
      $color:nth($btnColor,$i);
      background-color:$color;
      color:#fff;
      &:hover {
        background-color:lighten($color, 10%);
      }
      &.active {
        background-color:darken($color, 10%);
      }
      &[disabled] {
        background-color:lighten($color, 20%);
        color:lighten($color, 40%);
        cursor:not-allowed;
     }
  }
}


      `)
      document.querySelector('#sass_style').innerHTML = sassStyleSData.css
    </script>
  </body>
</html>
